<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<!-- Meta, title, CSS, favicons, etc. -->
		<meta charset="utf-8">
		<!--responsive mate -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="description" content="搜集所有应用稳定的框架，jq，ui等">
<meta name="author" content="Dc">
<meta name="keyword" content="Dc,bootstarp,zui,flatui,DcUi,jquery,modal,datatable">
<link rel="shortcut icon" href="favicon.ico">
<!-- Bootstrap core CSS --><!--flat--><!--flat media--><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
		<title>

			全局 CSS 样式 &middot; From Bootstrap v3 中文文档

		</title>
		
	
    <link rel="stylesheet" href="assets/zui/css/zui.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/style-responsive.css" />
    <style>
			.show-grid>div {
				border: 1px solid #999;
			}
			
			.top>li {
				width: 50%;
				float: left;
			}
		</style>
</head>

	<body>
		<header class="panel-heading bg-primary">
			栅格化布局
		</header>

		<div class="panel  clearfix">
			<h2 class="panel-heading">目录</h2>
			<div class="panel-body">
				<ul class="list-unstyled list-inline  top">
					<li class="">
						<a href="#overview">概览</a>
					</li>
					<li class="active">
						<a href="#grid">栅格系统</a>
					</li>
					<li class="active">
						<a href="#grid-offsetting">列偏移</a>
					</li>
					<li class="active">
						<a href="#grid-column-ordering">列排序</a>
					</li>
					<li class="">
						<a href="#responsive-utilities">响应式工具</a>
					</li>
					<li class="">
						<a href="#responsive-utilities-classes">显示隐藏</a>
					</li>
					<li class="">
						<a href="#responsive-utilities-classes">显示隐藏</a>
					</li>
				</ul>

			</div>
		</div>
		<a id="skippy" class="sr-only sr-only-focusable" href="#content">
			<div class="container"><span class="skiplink-text">Skip to main content</span></div>
		</a>

		<!-- Docs page layout -->
		<div class="bs-docs-header" id="content" tabindex="-1">
			<div class="container">
				<h1>全局 CSS 样式</h1>
				<p>设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。</p>
			</div>
		</div>

		<div class="container bs-docs-container">

			<div class="row">
				<div class="col-md-12" role="main">
					<div class="bs-docs-section">
						<h1 id="overview" class="page-header">概览</h1>

						<p class="lead">深入了解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。</p>

						<h2 id="overview-doctype">HTML5 文档类型</h2>
						<p>Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。</p>
						<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"zh-CN"</span><span class="nt">&gt;</span>
  ...
<span class="nt">&lt;/html&gt;</span></code></pre></div>

						<h2 id="overview-mobile">移动设备优先</h2>
						<p>在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，<strong>Bootstrap 是移动设备优先的</strong>。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。</p>
						<p>为了确保适当的绘制和触屏缩放，需要在 <code>&lt;head&gt;</code> 之中<strong>添加 viewport 元数据标签</strong>。</p>
						<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="nt">&gt;</span></code></pre></div>
						<p>在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 <code>user-scalable=no</code> 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！</p>
						<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"</span><span class="nt">&gt;</span></code></pre></div>

						<h2 id="overview-type-links">排版与链接</h2>
						<p>Bootstrap 排版、链接样式设置了基本的全局样式。分别是：</p>
						<ul>
							<li>为 <code>body</code> 元素设置 <code>background-color: #fff;</code></li>
							<li>使用 <code>@font-family-base</code>、<code>@font-size-base</code> 和 <code>@line-height-base</code> a变量作为排版的基本参数</li>
							<li>为所有链接设置了基本颜色 <code>@link-color</code> ，并且当链接处于 <code>:hover</code> 状态时才添加下划线</li>
						</ul>
						<p>这些样式都能在 <code>scaffolding.less</code> 文件中找到对应的源码。</p>

						<h2 id="overview-normalize">Normalize.css</h2>
						<p>为了增强跨浏览器表现的一致性，我们使用了
							<a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a>，这是由
							<a href="https://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> 和
							<a href="https://twitter.com/jon_neal" target="_blank">Jonathan Neal</a> 维护的一个CSS 重置样式库。</p>

						<h2 id="overview-container">布局容器</h2>
						<p>Bootstrap 需要为页面内容和栅格系统包裹一个 <code>.container</code> 容器。我们提供了两个作此用处的类。注意，由于 <code>padding</code> 等属性的原因，这两种 容器类不能互相嵌套。</p>
						<p><code>.container</code> 类用于固定宽度并支持响应式布局的容器。</p>
						<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
  ...
<span class="nt">&lt;/div&gt;</span></code></pre></div>
						<p><code>.container-fluid</code> 类用于 100% 宽度，占据全部视口（viewport）的容器。</p>
						<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">&gt;</span>
  ...
<span class="nt">&lt;/div&gt;</span></code></pre></div>
					</div>

					<div class="bs-docs-section">
						<h1 id="grid" class="page-header">栅格系统</h1>

						<p class="lead">Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的
							<a href="#grid-example-basic">预定义类</a>，还有强大的
							<a href="#grid-less">mixin 用于生成更具语义的布局</a>。</p>

						<h2 id="grid-intro">简介</h2>
						<p>栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：</p>
						<ul>
							<li>“行（row）”必须包含在 <code>.container</code> （固定宽度）或 <code>.container-fluid</code> （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。</li>
							<li>通过“行（row）”在水平方向创建一组“列（column）”。</li>
							<li>你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。</li>
							<li>类似 <code>.row</code> 和 <code>.col-xs-4</code> 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。</li>
							<li>通过为“列（column）”设置 <code>padding</code> 属性，从而创建列与列之间的间隔（gutter）。通过为 <code>.row</code> 元素设置负值 <code>margin</code> 从而抵消掉为 <code>.container</code> 元素设置的 <code>padding</code>，也就间接为“行（row）”所包含的“列（column）”抵消掉了<code>padding</code>。</li>
							<li>负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。</li>
							<li>栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 <code>.col-xs-4</code> 来创建。</li>
							<li>如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。</li>
							<li>栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 <code>.col-md-*</code> 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 <code>.col-lg-*</code> 不存在， 也影响大屏幕设备。</li>
						</ul>
						<p>通过研究后面的实例，可以将这些原理应用到你的代码中。</p>

						<h2 id="grid-media-queries">媒体查询</h2>
						<p>在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。</p>
						<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="cm">/* 超小屏幕（手机，小于 768px） */</span>
<span class="cm">/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */</span>

<span class="cm">/* 小屏幕（平板，大于等于 768px） */</span>
<span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-sm-min</span><span class="o">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>

<span class="cm">/* 中等屏幕（桌面显示器，大于等于 992px） */</span>
<span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-md-min</span><span class="o">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>

<span class="cm">/* 大屏幕（大桌面显示器，大于等于 1200px） */</span>
<span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-lg-min</span><span class="o">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span></code></pre></div>
						<p>我们偶尔也会在媒体查询代码中包含 <code>max-width</code> 从而将 CSS 的影响限制在更小范围的屏幕大小之内。</p>
						<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="k">@media</span> <span class="o">(</span><span class="nt">max-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-xs-max</span><span class="o">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
<span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-sm-min</span><span class="o">)</span> <span class="nt">and</span> <span class="o">(</span><span class="nt">max-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-sm-max</span><span class="o">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
<span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-md-min</span><span class="o">)</span> <span class="nt">and</span> <span class="o">(</span><span class="nt">max-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-md-max</span><span class="o">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
<span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-lg-min</span><span class="o">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span></code></pre></div>

						<h2 id="grid-options">栅格参数</h2>
						<p>通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。</p>
						<div class="table-responsive">
							<table class="table table-bordered table-striped">
								<thead>
									<tr>
										<th></th>
										<th>
											超小屏幕
											<small>手机 (&lt;768px)</small>
										</th>
										<th>
											小屏幕
											<small>平板 (&ge;768px)</small>
										</th>
										<th>
											中等屏幕
											<small>桌面显示器 (&ge;992px)</small>
										</th>
										<th>
											大屏幕
											<small>大桌面显示器 (&ge;1200px)</small>
										</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<th class="text-nowrap" scope="row">栅格系统行为</th>
										<td>总是水平排列</td>
										<td colspan="3">开始是堆叠在一起的，当大于这些阈值时将变为水平排列C</td>
									</tr>
									<tr>
										<th class="text-nowrap" scope="row"><code>.container</code> 最大宽度</th>
										<td>None （自动）</td>
										<td>750px</td>
										<td>970px</td>
										<td>1170px</td>
									</tr>
									<tr>
										<th class="text-nowrap" scope="row">类前缀</th>
										<td><code>.col-xs-</code></td>
										<td><code>.col-sm-</code></td>
										<td><code>.col-md-</code></td>
										<td><code>.col-lg-</code></td>
									</tr>
									<tr>
										<th class="text-nowrap" scope="row">列（column）数</th>
										<td colspan="4">12</td>
									</tr>
									<tr>
										<th class="text-nowrap" scope="row">最大列（column）宽</th>
										<td class="text-muted">自动</td>
										<td>~62px</td>
										<td>~81px</td>
										<td>~97px</td>
									</tr>
									<tr>
										<th class="text-nowrap" scope="row">槽（gutter）宽</th>
										<td colspan="4">30px （每列左右均有 15px）</td>
									</tr>
									<tr>
										<th class="text-nowrap" scope="row">可嵌套</th>
										<td colspan="4">是</td>
									</tr>
									<tr>
										<th class="text-nowrap" scope="row">偏移（Offsets）</th>
										<td colspan="4">是</td>
									</tr>
									<tr>
										<th class="text-nowrap" scope="row">列排序</th>
										<td colspan="4">是</td>
									</tr>
								</tbody>
							</table>
						</div>

						<h2 id="grid-example-basic">实例：从堆叠到水平排列</h2>
						<p>使用单一的一组 <code>.col-md-*</code> 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” <code>.row</code> 内。</p>
						<div class="bs-docs-grid">
							<div class="row show-grid">
								<div class="col-md-1">.col-md-1</div>
								<div class="col-md-1">.col-md-1</div>
								<div class="col-md-1">.col-md-1</div>
								<div class="col-md-1">.col-md-1</div>
								<div class="col-md-1">.col-md-1</div>
								<div class="col-md-1">.col-md-1</div>
								<div class="col-md-1">.col-md-1</div>
								<div class="col-md-1">.col-md-1</div>
								<div class="col-md-1">.col-md-1</div>
								<div class="col-md-1">.col-md-1</div>
								<div class="col-md-1">.col-md-1</div>
								<div class="col-md-1">.col-md-1</div>
							</div>
							<div class="row show-grid">
								<div class="col-md-8">.col-md-8</div>
								<div class="col-md-4">.col-md-4</div>
							</div>
							<div class="row show-grid">
								<div class="col-md-4">.col-md-4</div>
								<div class="col-md-4">.col-md-4</div>
								<div class="col-md-4">.col-md-4</div>
							</div>
							<div class="row show-grid">
								<div class="col-md-6">.col-md-6</div>
								<div class="col-md-6">.col-md-6</div>
							</div>
						</div>
						<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">&gt;</span>.col-md-1<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-8"</span><span class="nt">&gt;</span>.col-md-8<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>.col-md-4<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>.col-md-4<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>.col-md-4<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>.col-md-4<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>.col-md-6<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>.col-md-6<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>

						<h2 id="grid-example-fluid">实例：流式布局容器</h2>
						<p>将最外面的布局元素 <code>.container</code> 修改为 <code>.container-fluid</code>，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。</p>
						<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
    ...
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>

						<h2 id="grid-example-mixed">实例：移动设备和桌面屏幕</h2>
						<p>是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 <code>.col-xs-*</code> 和 <code>.col-md-*</code>。请看下面的实例，研究一下这些是如何工作的。</p>
						<div class="bs-docs-grid">
							<div class="row show-grid">
								<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
								<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
							</div>
							<div class="row show-grid">
								<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
								<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
								<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
							</div>
							<div class="row show-grid">
								<div class="col-xs-6">.col-xs-6</div>
								<div class="col-xs-6">.col-xs-6</div>
							</div>
						</div>
						<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Stack the columns on mobile by making one full-width and the other half-width --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-12 col-md-8"</span><span class="nt">&gt;</span>.col-xs-12 .col-md-8<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-md-4"</span><span class="nt">&gt;</span>.col-xs-6 .col-md-4<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

<span class="c">&lt;!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-md-4"</span><span class="nt">&gt;</span>.col-xs-6 .col-md-4<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-md-4"</span><span class="nt">&gt;</span>.col-xs-6 .col-md-4<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-md-4"</span><span class="nt">&gt;</span>.col-xs-6 .col-md-4<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

<span class="c">&lt;!-- Columns are always 50% wide, on mobile and desktop --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6"</span><span class="nt">&gt;</span>.col-xs-6<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6"</span><span class="nt">&gt;</span>.col-xs-6<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>

						<h2 id="grid-example-mixed-complete">实例：手机、平板、桌面</h2>
						<p>在上面案例的基础上，通过使用针对平板设备的 <code>.col-sm-*</code> 类，我们来创建更加动态和强大的布局吧。</p>
						<div class="bs-docs-grid">
							<div class="row show-grid">
								<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
								<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
							</div>
							<div class="row show-grid">
								<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
								<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
								<!-- Optional: clear the XS cols if their content doesn't match in height -->
								<div class="clearfix visible-xs-block"></div>
								<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
							</div>
						</div>
						<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-12 col-sm-6 col-md-8"</span><span class="nt">&gt;</span>.col-xs-12 .col-sm-6 .col-md-8<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-md-4"</span><span class="nt">&gt;</span>.col-xs-6 .col-md-4<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-sm-4"</span><span class="nt">&gt;</span>.col-xs-6 .col-sm-4<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-sm-4"</span><span class="nt">&gt;</span>.col-xs-6 .col-sm-4<span class="nt">&lt;/div&gt;</span>
  <span class="c">&lt;!-- Optional: clear the XS cols if their content doesn't match in height --&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"clearfix visible-xs-block"</span><span class="nt">&gt;&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-sm-4"</span><span class="nt">&gt;</span>.col-xs-6 .col-sm-4<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>

						<h2 id="grid-example-wrapping">实例：多余的列（column）将另起一行排列</h2>
						<p>如果在一个 <code>.row</code> 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。</p>
						<div class="bs-docs-grid">
							<div class="row show-grid">
								<div class="col-xs-9">.col-xs-9</div>
								<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
								<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
							</div>
						</div>
						<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-9"</span><span class="nt">&gt;</span>.col-xs-9<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-4"</span><span class="nt">&gt;</span>.col-xs-4<span class="nt">&lt;br&gt;</span>Since 9 + 4 = 13 <span class="ni">&amp;gt;</span> 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6"</span><span class="nt">&gt;</span>.col-xs-6<span class="nt">&lt;br&gt;</span>Subsequent columns continue along the new line.<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>

						<h2 id="grid-responsive-resets">响应式列重置</h2>
						<p>即便有上面给出的四组栅格class，你也不免会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 <code>.clearfix</code> 和
							<a href="#responsive-utilities">响应式工具类</a>。</p>
						<div class="bs-docs-grid">
							<div class="row show-grid">
								<div class="col-xs-6 col-sm-3">
									.col-xs-6 .col-sm-3
									<br> Resize your viewport or check it out on your phone for an example.
								</div>
								<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

								<!-- Add the extra clearfix for only the required viewport -->
								<div class="clearfix visible-xs-block"></div>

								<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
								<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
							</div>
						</div>
						<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-sm-3"</span><span class="nt">&gt;</span>.col-xs-6 .col-sm-3<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-sm-3"</span><span class="nt">&gt;</span>.col-xs-6 .col-sm-3<span class="nt">&lt;/div&gt;</span>

  <span class="c">&lt;!-- Add the extra clearfix for only the required viewport --&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"clearfix visible-xs-block"</span><span class="nt">&gt;&lt;/div&gt;</span>

  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-sm-3"</span><span class="nt">&gt;</span>.col-xs-6 .col-sm-3<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-sm-3"</span><span class="nt">&gt;</span>.col-xs-6 .col-sm-3<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
						<p>除了列在分界点清除响应， 您可能需要 <strong>重置偏移, 后推或前拉某个列</strong>。请看此
							<a href="../examples/grid/">栅格实例</a>。</p>
						<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-5 col-md-6"</span><span class="nt">&gt;</span>.col-sm-5 .col-md-6<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0"</span><span class="nt">&gt;</span>.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-6 col-md-5 col-lg-6"</span><span class="nt">&gt;</span>.col-sm-6 .col-md-5 .col-lg-6<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0"</span><span class="nt">&gt;</span>.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>

						<h2 id="grid-offsetting">列偏移</h2>
						<p>使用 <code>.col-md-offset-*</code> 类可以将列向右侧偏移。这些类实际是通过使用 <code>*</code> 选择器为当前元素增加了左侧的边距（margin）。例如，<code>.col-md-offset-4</code> 类将 <code>.col-md-4</code> 元素向右侧偏移了4个列（column）的宽度。</p>
						<div class="bs-docs-grid">
							<div class="row show-grid">
								<div class="col-md-4">.col-md-4</div>
								<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
							</div>
							<div class="row show-grid">
								<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
								<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
							</div>
							<div class="row show-grid">
								<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
							</div>
						</div>
						<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>.col-md-4<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4 col-md-offset-4"</span><span class="nt">&gt;</span>.col-md-4 .col-md-offset-4<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-3 col-md-offset-3"</span><span class="nt">&gt;</span>.col-md-3 .col-md-offset-3<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-3 col-md-offset-3"</span><span class="nt">&gt;</span>.col-md-3 .col-md-offset-3<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6 col-md-offset-3"</span><span class="nt">&gt;</span>.col-md-6 .col-md-offset-3<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>

						<h2 id="grid-nesting">嵌套列</h2>
						<p>为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 <code>.row</code> 元素和一系列 <code>.col-sm-*</code> 元素到已经存在的 <code>.col-sm-*</code> 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。</p>
						<div class="row show-grid">
							<div class="col-sm-9">
								Level 1: .col-sm-9
								<div class="row show-grid">
									<div class="col-xs-8 col-sm-6">
										Level 2: .col-xs-8 .col-sm-6
									</div>
									<div class="col-xs-4 col-sm-6">
										Level 2: .col-xs-4 .col-sm-6
									</div>
								</div>
							</div>
						</div>
						<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">&gt;</span>
    Level 1: .col-sm-9
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-8 col-sm-6"</span><span class="nt">&gt;</span>
        Level 2: .col-xs-8 .col-sm-6
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-4 col-sm-6"</span><span class="nt">&gt;</span>
        Level 2: .col-xs-4 .col-sm-6
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>

						<h2 id="grid-column-ordering">列排序</h2>
						<p>通过使用 <code>.col-md-push-*</code> 和 <code>.col-md-pull-*</code> 类就可以很容易的改变列（column）的顺序。</p>
						<div class="row show-grid">
							<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
							<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
						</div>

						<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-9 col-md-push-3"</span><span class="nt">&gt;</span>.col-md-9 .col-md-push-3<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-3 col-md-pull-9"</span><span class="nt">&gt;</span>.col-md-3 .col-md-pull-9<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>

						<h2 id="grid-less">Less mixin 和变量</h2>
						<p>除了用于快速布局的
							<a href="#grid-example-basic">预定义栅格类</a>，Bootstrap 还包含了一组 Less 变量和 mixin 用于帮你生成简单、语义化的布局。</p>

						<h3>变量</h3>
						<p>通过变量来定义列数、槽（gutter）宽、媒体查询阈值（用于确定合适让列浮动）。我们使用这些变量生成预定义的栅格类，如上所示，还有如下所示的定制 mixin。</p>
						<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="k">@grid-columns</span><span class="nd">:</span>              <span class="nt">12</span><span class="p">;</span>
<span class="k">@grid-gutter-width</span><span class="nd">:</span>         <span class="nt">30px</span><span class="p">;</span>
<span class="k">@grid-float-breakpoint</span><span class="nd">:</span>     <span class="nt">768px</span><span class="p">;</span></code></pre></div>

						<h3>mixin</h3>
						<p>mixin 用来和栅格变量一同使用，为每个列（column）生成语义化的 CSS 代码。</p>
						<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Creates a wrapper for a series of columns
</span><span class="err">.</span><span class="na">make-row</span><span class="err">(@</span><span class="na">gutter</span><span class="p">:</span> <span class="o">@</span><span class="n">grid-gutter-width</span><span class="p">)</span> <span class="p">{</span>
  <span class="c1">// Then clear the floated columns
</span>  <span class="nc">.clearfix</span><span class="o">()</span><span class="p">;</span>

  <span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-sm-min</span><span class="o">)</span> <span class="p">{</span>
    <span class="nl">margin-left</span><span class="p">:</span>  <span class="p">(</span><span class="o">@</span><span class="n">gutter</span> <span class="o">/</span> <span class="m">-2</span><span class="p">);</span>
    <span class="nl">margin-right</span><span class="p">:</span> <span class="p">(</span><span class="o">@</span><span class="n">gutter</span> <span class="o">/</span> <span class="m">-2</span><span class="p">);</span>
  <span class="p">}</span>

  <span class="c1">// Negative margin nested rows out to align the content of columns
</span>  <span class="nc">.row</span> <span class="p">{</span>
    <span class="nl">margin-left</span><span class="p">:</span>  <span class="p">(</span><span class="o">@</span><span class="n">gutter</span> <span class="o">/</span> <span class="m">-2</span><span class="p">);</span>
    <span class="nl">margin-right</span><span class="p">:</span> <span class="p">(</span><span class="o">@</span><span class="n">gutter</span> <span class="o">/</span> <span class="m">-2</span><span class="p">);</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="c1">// Generate the extra small columns
</span><span class="nc">.make-xs-column</span><span class="o">(@</span><span class="nt">columns</span><span class="p">;</span> <span class="k">@gutter</span><span class="nd">:</span> <span class="o">@</span><span class="nt">grid-gutter-width</span><span class="o">)</span> <span class="p">{</span>
  <span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span>
  <span class="c1">// Prevent columns from collapsing when empty
</span>  <span class="nl">min-height</span><span class="p">:</span> <span class="m">1px</span><span class="p">;</span>
  <span class="c1">// Inner gutter via padding
</span>  <span class="nl">padding-left</span><span class="p">:</span>  <span class="p">(</span><span class="o">@</span><span class="n">gutter</span> <span class="o">/</span> <span class="m">2</span><span class="p">);</span>
  <span class="nl">padding-right</span><span class="p">:</span> <span class="p">(</span><span class="o">@</span><span class="n">gutter</span> <span class="o">/</span> <span class="m">2</span><span class="p">);</span>

  <span class="c1">// Calculate width based on number of columns available
</span>  <span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">grid-float-breakpoint</span><span class="o">)</span> <span class="p">{</span>
    <span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
    <span class="nl">width</span><span class="p">:</span> <span class="nf">percentage</span><span class="p">((</span><span class="o">@</span><span class="n">columns</span> <span class="o">/</span> <span class="o">@</span><span class="n">grid-columns</span><span class="p">));</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="c1">// Generate the small columns
</span><span class="nc">.make-sm-column</span><span class="o">(@</span><span class="nt">columns</span><span class="p">;</span> <span class="k">@gutter</span><span class="nd">:</span> <span class="o">@</span><span class="nt">grid-gutter-width</span><span class="o">)</span> <span class="p">{</span>
  <span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span>
  <span class="c1">// Prevent columns from collapsing when empty
</span>  <span class="nl">min-height</span><span class="p">:</span> <span class="m">1px</span><span class="p">;</span>
  <span class="c1">// Inner gutter via padding
</span>  <span class="nl">padding-left</span><span class="p">:</span>  <span class="p">(</span><span class="o">@</span><span class="n">gutter</span> <span class="o">/</span> <span class="m">2</span><span class="p">);</span>
  <span class="nl">padding-right</span><span class="p">:</span> <span class="p">(</span><span class="o">@</span><span class="n">gutter</span> <span class="o">/</span> <span class="m">2</span><span class="p">);</span>

  <span class="c1">// Calculate width based on number of columns available
</span>  <span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-sm-min</span><span class="o">)</span> <span class="p">{</span>
    <span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
    <span class="nl">width</span><span class="p">:</span> <span class="nf">percentage</span><span class="p">((</span><span class="o">@</span><span class="n">columns</span> <span class="o">/</span> <span class="o">@</span><span class="n">grid-columns</span><span class="p">));</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="c1">// Generate the small column offsets
</span><span class="nc">.make-sm-column-offset</span><span class="o">(@</span><span class="nt">columns</span><span class="o">)</span> <span class="p">{</span>
  <span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-sm-min</span><span class="o">)</span> <span class="p">{</span>
    <span class="nl">margin-left</span><span class="p">:</span> <span class="nf">percentage</span><span class="p">((</span><span class="o">@</span><span class="n">columns</span> <span class="o">/</span> <span class="o">@</span><span class="n">grid-columns</span><span class="p">));</span>
  <span class="p">}</span>
<span class="p">}</span>
<span class="nc">.make-sm-column-push</span><span class="o">(@</span><span class="nt">columns</span><span class="o">)</span> <span class="p">{</span>
  <span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-sm-min</span><span class="o">)</span> <span class="p">{</span>
    <span class="nl">left</span><span class="p">:</span> <span class="nf">percentage</span><span class="p">((</span><span class="o">@</span><span class="n">columns</span> <span class="o">/</span> <span class="o">@</span><span class="n">grid-columns</span><span class="p">));</span>
  <span class="p">}</span>
<span class="p">}</span>
<span class="nc">.make-sm-column-pull</span><span class="o">(@</span><span class="nt">columns</span><span class="o">)</span> <span class="p">{</span>
  <span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-sm-min</span><span class="o">)</span> <span class="p">{</span>
    <span class="nl">right</span><span class="p">:</span> <span class="nf">percentage</span><span class="p">((</span><span class="o">@</span><span class="n">columns</span> <span class="o">/</span> <span class="o">@</span><span class="n">grid-columns</span><span class="p">));</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="c1">// Generate the medium columns
</span><span class="nc">.make-md-column</span><span class="o">(@</span><span class="nt">columns</span><span class="p">;</span> <span class="k">@gutter</span><span class="nd">:</span> <span class="o">@</span><span class="nt">grid-gutter-width</span><span class="o">)</span> <span class="p">{</span>
  <span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span>
  <span class="c1">// Prevent columns from collapsing when empty
</span>  <span class="nl">min-height</span><span class="p">:</span> <span class="m">1px</span><span class="p">;</span>
  <span class="c1">// Inner gutter via padding
</span>  <span class="nl">padding-left</span><span class="p">:</span>  <span class="p">(</span><span class="o">@</span><span class="n">gutter</span> <span class="o">/</span> <span class="m">2</span><span class="p">);</span>
  <span class="nl">padding-right</span><span class="p">:</span> <span class="p">(</span><span class="o">@</span><span class="n">gutter</span> <span class="o">/</span> <span class="m">2</span><span class="p">);</span>

  <span class="c1">// Calculate width based on number of columns available
</span>  <span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-md-min</span><span class="o">)</span> <span class="p">{</span>
    <span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
    <span class="nl">width</span><span class="p">:</span> <span class="nf">percentage</span><span class="p">((</span><span class="o">@</span><span class="n">columns</span> <span class="o">/</span> <span class="o">@</span><span class="n">grid-columns</span><span class="p">));</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="c1">// Generate the medium column offsets
</span><span class="nc">.make-md-column-offset</span><span class="o">(@</span><span class="nt">columns</span><span class="o">)</span> <span class="p">{</span>
  <span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-md-min</span><span class="o">)</span> <span class="p">{</span>
    <span class="nl">margin-left</span><span class="p">:</span> <span class="nf">percentage</span><span class="p">((</span><span class="o">@</span><span class="n">columns</span> <span class="o">/</span> <span class="o">@</span><span class="n">grid-columns</span><span class="p">));</span>
  <span class="p">}</span>
<span class="p">}</span>
<span class="nc">.make-md-column-push</span><span class="o">(@</span><span class="nt">columns</span><span class="o">)</span> <span class="p">{</span>
  <span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-md-min</span><span class="o">)</span> <span class="p">{</span>
    <span class="nl">left</span><span class="p">:</span> <span class="nf">percentage</span><span class="p">((</span><span class="o">@</span><span class="n">columns</span> <span class="o">/</span> <span class="o">@</span><span class="n">grid-columns</span><span class="p">));</span>
  <span class="p">}</span>
<span class="p">}</span>
<span class="nc">.make-md-column-pull</span><span class="o">(@</span><span class="nt">columns</span><span class="o">)</span> <span class="p">{</span>
  <span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-md-min</span><span class="o">)</span> <span class="p">{</span>
    <span class="nl">right</span><span class="p">:</span> <span class="nf">percentage</span><span class="p">((</span><span class="o">@</span><span class="n">columns</span> <span class="o">/</span> <span class="o">@</span><span class="n">grid-columns</span><span class="p">));</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="c1">// Generate the large columns
</span><span class="nc">.make-lg-column</span><span class="o">(@</span><span class="nt">columns</span><span class="p">;</span> <span class="k">@gutter</span><span class="nd">:</span> <span class="o">@</span><span class="nt">grid-gutter-width</span><span class="o">)</span> <span class="p">{</span>
  <span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span>
  <span class="c1">// Prevent columns from collapsing when empty
</span>  <span class="nl">min-height</span><span class="p">:</span> <span class="m">1px</span><span class="p">;</span>
  <span class="c1">// Inner gutter via padding
</span>  <span class="nl">padding-left</span><span class="p">:</span>  <span class="p">(</span><span class="o">@</span><span class="n">gutter</span> <span class="o">/</span> <span class="m">2</span><span class="p">);</span>
  <span class="nl">padding-right</span><span class="p">:</span> <span class="p">(</span><span class="o">@</span><span class="n">gutter</span> <span class="o">/</span> <span class="m">2</span><span class="p">);</span>

  <span class="c1">// Calculate width based on number of columns available
</span>  <span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-lg-min</span><span class="o">)</span> <span class="p">{</span>
    <span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
    <span class="nl">width</span><span class="p">:</span> <span class="nf">percentage</span><span class="p">((</span><span class="o">@</span><span class="n">columns</span> <span class="o">/</span> <span class="o">@</span><span class="n">grid-columns</span><span class="p">));</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="c1">// Generate the large column offsets
</span><span class="nc">.make-lg-column-offset</span><span class="o">(@</span><span class="nt">columns</span><span class="o">)</span> <span class="p">{</span>
  <span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-lg-min</span><span class="o">)</span> <span class="p">{</span>
    <span class="nl">margin-left</span><span class="p">:</span> <span class="nf">percentage</span><span class="p">((</span><span class="o">@</span><span class="n">columns</span> <span class="o">/</span> <span class="o">@</span><span class="n">grid-columns</span><span class="p">));</span>
  <span class="p">}</span>
<span class="p">}</span>
<span class="nc">.make-lg-column-push</span><span class="o">(@</span><span class="nt">columns</span><span class="o">)</span> <span class="p">{</span>
  <span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-lg-min</span><span class="o">)</span> <span class="p">{</span>
    <span class="nl">left</span><span class="p">:</span> <span class="nf">percentage</span><span class="p">((</span><span class="o">@</span><span class="n">columns</span> <span class="o">/</span> <span class="o">@</span><span class="n">grid-columns</span><span class="p">));</span>
  <span class="p">}</span>
<span class="p">}</span>
<span class="nc">.make-lg-column-pull</span><span class="o">(@</span><span class="nt">columns</span><span class="o">)</span> <span class="p">{</span>
  <span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="nd">:</span> <span class="o">@</span><span class="nt">screen-lg-min</span><span class="o">)</span> <span class="p">{</span>
    <span class="nl">right</span><span class="p">:</span> <span class="nf">percentage</span><span class="p">((</span><span class="o">@</span><span class="n">columns</span> <span class="o">/</span> <span class="o">@</span><span class="n">grid-columns</span><span class="p">));</span>
  <span class="p">}</span>
<span class="p">}</span></code></pre></div>

						<h3>实例展示</h3>
						<p>你可以重新修改这些变量的值，或者用默认值调用这些 mixin。下面就是一个利用默认设置生成两列布局（列之间有间隔）的案例。</p>
						<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.wrapper</span> <span class="p">{</span>
  <span class="nc">.make-row</span><span class="o">()</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.content-main</span> <span class="p">{</span>
  <span class="nc">.make-lg-column</span><span class="o">(</span><span class="nt">8</span><span class="o">)</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.content-secondary</span> <span class="p">{</span>
  <span class="nc">.make-lg-column</span><span class="o">(</span><span class="nt">3</span><span class="o">)</span><span class="p">;</span>
  <span class="nc">.make-lg-column-offset</span><span class="o">(</span><span class="nt">1</span><span class="o">)</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
						<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"wrapper"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content-main"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content-secondary"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
					</div>

			
				
				
					
					<div class="bs-docs-section">
						<h1 id="responsive-utilities" class="page-header">响应式工具</h1>

						<p class="lead">为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。</p>
						<p>有针对性的使用这类工具类，从而避免为同一个网站创建完全不同的版本。相反，通过使用这些工具类可以在不同设备上提供不同的展现形式。</p>

						<h2 id="responsive-utilities-classes">可用的类</h2>
						<p>通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。</p>
						<div class="table-responsive">
							<table class="table table-bordered table-striped responsive-utilities">
								<thead>
									<tr>
										<th></th>
										<th>
											超小屏幕
											<small>手机 (&lt;768px)</small>
										</th>
										<th>
											小屏幕
											<small>平板 (&ge;768px)</small>
										</th>
										<th>
											中等屏幕
											<small>桌面 (&ge;992px)</small>
										</th>
										<th>
											大屏幕
											<small>桌面 (&ge;1200px)</small>
										</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<th scope="row"><code>.visible-xs-*</code></th>
										<td class="is-visible">可见</td>
										<td class="is-hidden">隐藏</td>
										<td class="is-hidden">隐藏</td>
										<td class="is-hidden">隐藏</td>
									</tr>
									<tr>
										<th scope="row"><code>.visible-sm-*</code></th>
										<td class="is-hidden">隐藏</td>
										<td class="is-visible">可见</td>
										<td class="is-hidden">隐藏</td>
										<td class="is-hidden">隐藏</td>
									</tr>
									<tr>
										<th scope="row"><code>.visible-md-*</code></th>
										<td class="is-hidden">隐藏</td>
										<td class="is-hidden">隐藏</td>
										<td class="is-visible">可见</td>
										<td class="is-hidden">隐藏</td>
									</tr>
									<tr>
										<th scope="row"><code>.visible-lg-*</code></th>
										<td class="is-hidden">隐藏</td>
										<td class="is-hidden">隐藏</td>
										<td class="is-hidden">隐藏</td>
										<td class="is-visible">可见</td>
									</tr>
								</tbody>
								<tbody>
									<tr>
										<th scope="row"><code>.hidden-xs</code></th>
										<td class="is-hidden">隐藏</td>
										<td class="is-visible">可见</td>
										<td class="is-visible">可见</td>
										<td class="is-visible">可见</td>
									</tr>
									<tr>
										<th scope="row"><code>.hidden-sm</code></th>
										<td class="is-visible">可见</td>
										<td class="is-hidden">隐藏</td>
										<td class="is-visible">可见</td>
										<td class="is-visible">可见</td>
									</tr>
									<tr>
										<th scope="row"><code>.hidden-md</code></th>
										<td class="is-visible">可见</td>
										<td class="is-visible">可见</td>
										<td class="is-hidden">隐藏</td>
										<td class="is-visible">可见</td>
									</tr>
									<tr>
										<th scope="row"><code>.hidden-lg</code></th>
										<td class="is-visible">可见</td>
										<td class="is-visible">可见</td>
										<td class="is-visible">可见</td>
										<td class="is-hidden">隐藏</td>
									</tr>
								</tbody>
							</table>
						</div>

						<p>从 v3.2.0 版本起，形如 <code>.visible-*-*</code> 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 <code>display</code> 属性，列表如下：</p>
						<div class="table-responsive">
							<table class="table table-bordered table-striped">
								<thead>
									<tr>
										<th>类组</th>
										<th>CSS <code>display</code></th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<th scope="row"><code>.visible-*-block</code></th>
										<td><code>display: block;</code></td>
									</tr>
									<tr>
										<th scope="row"><code>.visible-*-inline</code></th>
										<td><code>display: inline;</code></td>
									</tr>
									<tr>
										<th scope="row"><code>.visible-*-inline-block</code></th>
										<td><code>display: inline-block;</code></td>
									</tr>
								</tbody>
							</table>
						</div>
						<p>因此，以超小屏幕（<code>xs</code>）为例，可用的 <code>.visible-*-*</code> 类是：<code>.visible-xs-block</code>、<code>.visible-xs-inline</code> 和 <code>.visible-xs-inline-block</code>。</p>
						<p><code>.visible-xs</code>、<code>.visible-sm</code>、<code>.visible-md</code> 和 <code>.visible-lg</code> 类也同时存在。但是<strong>从 v3.2.0 版本开始不再建议使用</strong>。除了 <code>&lt;table&gt;</code> 相关的元素的特殊情况外，它们与 <code>.visible-*-block</code> 大体相同。</p>

						<h2 id="responsive-utilities-print">打印类</h2>
						<p>和常规的响应式类一样，使用下面的类可以针对打印机隐藏或显示某些内容。</p>
						<div class="table-responsive">
							<table class="table table-bordered table-striped responsive-utilities">
								<thead>
									<tr>
										<th>class</th>
										<th>浏览器</th>
										<th>打印机</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<th scope="row">
											<code>.visible-print-block</code><br>
											<code>.visible-print-inline</code><br>
											<code>.visible-print-inline-block</code>
										</th>
										<td class="is-hidden">隐藏</td>
										<td class="is-visible">可见</td>
									</tr>
									<tr>
										<th scope="row"><code>.hidden-print</code></th>
										<td class="is-visible">可见</td>
										<td class="is-hidden">隐藏</td>
									</tr>
								</tbody>
							</table>
						</div>
						<p><code>.visible-print</code> 类也是存在的，但是从 v3.2.0 版本开始<strong>不建议使用</strong>。它与 <code>.visible-print-block</code> 类大致相同，除了 <code>&lt;table&gt;</code> 相关元素的特殊情况外。</p>

						<h2 id="responsive-utilities-tests">测试用例</h2>
						<p>调整你的浏览器大小，或者用其他设备打开页面，都可以测试这些响应式工具类。</p>

						<h3>在...上可见</h3>
						<p>带有绿色标记的元素表示其在当前浏览器视口（viewport）中是<strong>可见的</strong>。</p>
						<div class="row responsive-utilities-test visible-on">
							<div class="col-xs-6">
								<span class="hidden-xs">超小屏幕</span>
								<span class="visible-xs-block">&#10004; 在超小屏幕上可见</span>
							</div>
							<div class="col-xs-6">
								<span class="hidden-sm">小屏幕</span>
								<span class="visible-sm-block">&#10004; 在小屏幕上可见</span>
							</div>
							<div class="clearfix visible-xs-block"></div>
							<div class="col-xs-6">
								<span class="hidden-md">中等屏幕</span>
								<span class="visible-md-block">&#10004; 在中等屏幕上可见</span>
							</div>
							<div class="col-xs-6">
								<span class="hidden-lg">大屏幕</span>
								<span class="visible-lg-block">&#10004; 在大屏幕上可见</span>
							</div>
						</div>
						<div class="row responsive-utilities-test visible-on">
							<div class="col-xs-6 col-sm-6">
								<span class="hidden-xs hidden-sm">超小屏幕和小屏幕</span>
								<span class="visible-xs-block visible-sm-block">&#10004; 在超小屏幕和小屏幕上可见</span>
							</div>
							<div class="col-xs-6 col-sm-6">
								<span class="hidden-md hidden-lg">中等屏幕和大屏幕</span>
								<span class="visible-md-block visible-lg-block">&#10004; 在中等屏幕和大屏幕上可见</span>
							</div>
							<div class="clearfix visible-xs-block"></div>
							<div class="col-xs-6 col-sm-6">
								<span class="hidden-xs hidden-md">超小屏幕和中等屏幕</span>
								<span class="visible-xs-block visible-md-block">&#10004; 在超小屏幕和中等屏幕上可见</span>
							</div>
							<div class="col-xs-6 col-sm-6">
								<span class="hidden-sm hidden-lg">小屏幕和大屏幕</span>
								<span class="visible-sm-block visible-lg-block">&#10004; 在小屏幕和大屏幕上可见</span>
							</div>
							<div class="clearfix visible-xs-block"></div>
							<div class="col-xs-6 col-sm-6">
								<span class="hidden-xs hidden-lg">超小屏幕和大屏幕</span>
								<span class="visible-xs-block visible-lg-block">&#10004; 在超小屏幕和大屏幕上可见</span>
							</div>
							<div class="col-xs-6 col-sm-6">
								<span class="hidden-sm hidden-md">小屏幕和中等屏幕</span>
								<span class="visible-sm-block visible-md-block">&#10004; 在小屏幕和中等屏幕上可见</span>
							</div>
						</div>

						<h3>在...上隐藏</h3>
						<p>带有绿色标记的元素表示其在当前浏览器视口（viewport）中是<strong>隐藏的</strong>。</p>
						<div class="row responsive-utilities-test hidden-on">
							<div class="col-xs-6 col-sm-3">
								<span class="hidden-xs">超小屏幕</span>
								<span class="visible-xs-block">&#10004; 在超小屏幕上隐藏</span>
							</div>
							<div class="col-xs-6 col-sm-3">
								<span class="hidden-sm">小屏幕</span>
								<span class="visible-sm-block">&#10004; 在小屏幕上隐藏</span>
							</div>
							<div class="clearfix visible-xs-block"></div>
							<div class="col-xs-6 col-sm-3">
								<span class="hidden-md">中等屏幕</span>
								<span class="visible-md-block">&#10004; 在中等屏幕上隐藏</span>
							</div>
							<div class="col-xs-6 col-sm-3">
								<span class="hidden-lg">大屏幕</span>
								<span class="visible-lg-block">&#10004; 在大屏幕上隐藏</span>
							</div>
						</div>
						<div class="row responsive-utilities-test hidden-on">
							<div class="col-xs-6">
								<span class="hidden-xs hidden-sm">超小屏幕与小屏幕</span>
								<span class="visible-xs-block visible-sm-block">&#10004; 在超小屏幕和小屏幕上隐藏</span>
							</div>
							<div class="col-xs-6">
								<span class="hidden-md hidden-lg">中等屏幕和大屏幕</span>
								<span class="visible-md-block visible-lg-block">&#10004; 在 medium 和 large 上隐藏</span>
							</div>
							<div class="clearfix visible-xs-block"></div>
							<div class="col-xs-6">
								<span class="hidden-xs hidden-md">超小屏幕和中等屏幕</span>
								<span class="visible-xs-block visible-md-block">&#10004; 在超小屏幕和中等屏幕上隐藏</span>
							</div>
							<div class="col-xs-6">
								<span class="hidden-sm hidden-lg">小屏幕和大屏幕</span>
								<span class="visible-sm-block visible-lg-block">&#10004; 在小屏幕和大屏幕上隐藏</span>
							</div>
							<div class="clearfix visible-xs-block"></div>
							<div class="col-xs-6">
								<span class="hidden-xs hidden-lg">超小屏幕和大屏幕</span>
								<span class="visible-xs-block visible-lg-block">&#10004; 在超小屏幕和大屏幕上隐藏</span>
							</div>
							<div class="col-xs-6">
								<span class="hidden-sm hidden-md">小屏幕和中等屏幕</span>
								<span class="visible-sm-block visible-md-block">&#10004; 在小屏幕和中等屏幕上隐藏</span>
							</div>
						</div>
					</div>

					
				</div>
			</div>
		</div>

		<!-- Footer
================================================== -->
	
		<!--<link rel="import " href="_footer.html?__inline" />-->

	

</body>

</html>